import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getNewsByIdAction } from '../store/action/news';

export default function News() {
  const dispatch = useDispatch();
  const { current } = useSelector((state) => state.channel);
  // 5. 获取新闻列表数据
  const { list } = useSelector((state) => state.news);

  useEffect(() => {
    dispatch(getNewsByIdAction(current));
  }, [dispatch, current]);
  return (
    <div className="list">
      {list.map((item) => {
        // 6. 添上对应的内容
        return (
          <div key={item.art_id} className="article_item">
            <h3 className="van-ellipsis">{item.title}</h3>
            <div className="img_box">
              <img src={item.cover.images ? item.cover.images[0] : ''} className="w100" alt="" />
            </div>
            <div className="info_box">
              <span>{item.aut_name}</span>
              <span>{item.comm_count}评论</span>
              <span>{item.pubdate}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
}
